import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, Outlet } from 'react-router-dom';
import { isAuthenticated } from './utils/auth';
import Login from './components/Login';
import Register from './components/Register';
import Dashboard from './components/Dashboard';
import MainLayout from './components/Layout/MainLayout';
import TaskList from './components/Tasks/TaskList';
import TaskDetails from './components/Tasks/TaskDetails';
import TaskForm from './components/Tasks/TaskForm';
import StepList from './components/Steps/StepList';
import StepForm from './components/Steps/StepForm';
import ReviewForm from './components/Reviews/ReviewForm';
import AIStepGenerator from './components/AI/AIStepGenerator';

// 受保护的路由组件
const ProtectedRoute = ({ children }) => {
    // 添加延迟，确保 localStorage 已经同步
    const [checking, setChecking] = React.useState(true);
    const [authenticated, setAuthenticated] = React.useState(false);

    React.useEffect(() => {
        // 延迟检查，避免竞态条件
        const timer = setTimeout(() => {
            const isAuth = isAuthenticated();
            setAuthenticated(isAuth);
            setChecking(false);
        }, 100);

        return () => clearTimeout(timer);
    }, []);

    if (checking) {
        return <div>检查认证状态...</div>;
    }

    return authenticated ? children : <Navigate to="/login" replace />;
};

function App() {
    return (
        <Router>
            <div className="App">
                <Routes>
                    <Route path="/login" element={<Login />} />
                    <Route path="/register" element={<Register />} />

                    {/* 受保护的路由 - 使用 MainLayout 作为布局容器 */}
                    <Route
                        path="/"
                        element={
                            <ProtectedRoute>
                                <MainLayout />
                            </ProtectedRoute>
                        }
                    >
                        <Route path="dashboard" element={<Dashboard />} />
                        <Route path="tasks" element={<TaskList />} />

                        {/* 具体路径放在参数路径之前 */}
                        <Route path="tasks/new" element={<TaskForm />} />
                        <Route path="tasks/edit/:id" element={<TaskForm />} />
                        <Route path="tasks/:id" element={<TaskDetails />} />

                        <Route path="tasks/:taskId/steps" element={<StepList />} />
                        <Route path="tasks/:taskId/steps/new" element={<StepForm />} />
                        <Route path="tasks/:taskId/steps/:stepId" element={<StepForm />} />
                        <Route path="tasks/:taskId/reviews/new" element={<ReviewForm />} />
                        <Route path="ai/generate-steps" element={<AIStepGenerator />} />
                        <Route index element={<Navigate to="/dashboard" replace />} />
                    </Route>

                    <Route path="*" element={<Navigate to="/dashboard" replace />} />
                </Routes>
            </div>
        </Router>
    );
}

export default App;
